<template>
	<view class="content">
		<view class="search-box">
			<uni-icons @click="back" type="arrowleft" size="25" color="#252525" />
			<view class="input-box">
				我常买的宝贝
			</view>
			<view class="search-btn" @tap="loadHistoryGoods()">换一批</view>
		</view>
		<view class="search-keyword">
			<scroll-view class="keyword-box" v-show="!isShowKeywordList" scroll-y>
				<view class="history">
					<scroll-view scroll-x v-if="historyGoods.length>0">
						<view class="history_wrapper">
							<view v-for="(history,index) in historyGoods" class="history_item"
								@tap="navToFloorItemDetail(history)" :key="index">
								<view class="history_item_img">
									<image :src="history.thumbnail" mode="widthFix"></image>
									<view class="history_item_img_tag">已买{{history.quantity}}次</view>
									<image v-if="history.status == 'unsale'" class="tag" src="../../static/undercarriage.png"/>
									<image v-if="history.status == 'invalid'" class="tag" src="../../static/failure.png"/>
								</view>
								<view class="history_item_content">
									<view class="history_item_content_name">
										{{history.name}}
									</view>
									<my-show-price :hasLogin="hasLogin" :goodsPrice="history.price"
										:isShowPriceUnlogin="isShowPriceUnlogin">
									</my-show-price>
									<view style="text-align: right;">
										<image src="../../static/cart.png" mode="widthFix" class="history_item_content_add" @click.stop="addCart(history)"></image>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<u-empty v-else text="暂无数据"></u-empty>
				</view>
			<!-- 为你推荐 -->
			<view class="recommendArea MT15" v-if="recommendList && recommendList.length > 0 ">
				<view class="guessLike">
					<view class="photo1"></view>
					<view class="photo2"></view>
					<view class="guessLikeWord">猜你喜欢</view>
					<view class="photo3"></view>
					<view class="photo4"></view>
				</view>
				<view class="goodList">
					<WaterfallsFlow @addCart='addCart' :wfList='recommendList' @itemTap="navToFloorItemDetail"
						:hasLogin="hasLogin" :showBeforeLogin="isShowPriceUnlogin" />
				</view>
			</view>
			</scroll-view>
			
		</view>
		
	</view>
</template>

<script>
	import myShowPrice from '../../components/my-show-price/my-show-price.vue'
	import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow'
	import {
		queryHistoryPage,
		queryDefinedHotGoods,
		qryGuessHotGoods
	} from '../../api/order/order';
	import {
		deleteAllRecentKey,
		getRecentKey,
		listHotkey
	} from '../../api/product/list';
	import {
		mapState
	} from 'vuex';
	import {
		addToCart
	} from '../../api/cart/cart.js'
	export default {
		components: {
			myShowPrice,
			WaterfallsFlow
		},
		data() {
			return {
				defaultKeyword: "",
				keyword: "",
				oldKeywordList: [],
				historyGoods: [],
				keywordList: [],
				forbid: '',
				// 关联搜索展示
				isShowKeywordList: false,
				showAll: false,
				storageKey: 'OrderSearchHistoryKeys',
				historyData: {},
				isShowPriceUnlogin: 0,
				integralRule: {
					priceShowWay: 1
				},
				recommendList: [],
				curPage:0,
				historyTotal:0
			}
		},
		computed: {
			...mapState(['hasLogin'])
		},
		onLoad(option) {
			this.keyword = option.key||''
			this.init();
			this.isShowPriceUnlogin = uni.getStorageSync('isShowPriceUnlogin') || 0
			if (uni.getStorageSync('integralRule')) {
				this.integralRule = uni.getStorageSync('integralRule')
			}
		},
		methods: {
			addCart(item) {
			console.log(item)
					let pType;
					let qType;
					if (item.goodsSourceType === 0) {
						pType = '02';
						qType = 1;
					} else {
						pType = '01';
						qType = 2;
					}
					const good = {
						protocolGoodsId: item.goodsId,
						protocolId: item.protocolId,
						protocolType: pType,
						remainAmount: 1
					}
					/* const params = {
						areaId: uni.getStorageSync('areaId'),
						bizDeptId: uni.getStorageSync('bizDeptInfo').deptId,
						goods: [good],
						isqueryAmount: true,
						queryType: qType
					} */
					const params = {
						areaId: uni.getStorageSync('areaId'),
						goodsId: item.goodsId||item.id,
						num: 1
					}
					let userAreaId = uni.getStorageSync('areaId')
					if (userAreaId) {
						params['areaId'] = userAreaId
					} else {
						params['areaId'] = uni.getStorageSync('tenantAreaId')
					}
					addToCart(params).then(res => {
						if (res.code === 0) {
							this.$util.msg('加入购物车成功')
						}else if(res.code === 1001) {
						let msg = ''
						if(res.extra.productAvailability) {
							msg = res.extra.productAvailability.filter(item => !item.canPurchase).map(item => item.message).toString()
						}
						this.$util.msg(res.message+' '+msg)
					} else {
							this.$util.msg(res.message)
						}
					})
				
			},
			init() {
				this.loadDefaultKeyword();
				this.loadHistoryGoods()
				this.getQueryDefinedHotGoods()
			},
			// 加载历史购买
			loadHistoryGoods() {
				if (this.historyTotal / 6 > this.curPage) {
				        this.curPage++;
				      } else {
				        this.curPage = 1;
				      }
				queryHistoryPage({
					page: this.curPage,
					limit: 6
				}).then(res => {
					if (res.code === 0) {
						this.historyData = res.data
						this.historyGoods = this.historyData.goodsList.records || []
						this.historyTotal = this.historyData.goodsList.total 
					}
				})
			},
			getQueryDefinedHotGoods() {
				if(this.hasLogin){
					qryGuessHotGoods({current:1,end:10}).then(res=>{
						if(res.code===0){
							if(res.data&&res.data.length>0){
								res.data.forEach(item=>{
									if(item.goodsImageList&&item.goodsImageList.length>0){
										item.goodsImage = item.goodsImageList[0].url
									}
								})
								this.recommendList = res.data
							}
						}
					})
				}else{
					queryDefinedHotGoods({
						specialAreaId:2,
						goodsNum:10
					}).then(res => {
						if(res.code == 0) {
							this.recommendList = res.data
						}
					})
				}
			},
			blur() {
				uni.hideKeyboard()
			},
			changeShow() {
				this.showAll = !this.showAll
			},
			//加载默认搜索关键字
			loadDefaultKeyword() {
				//定义默认搜索关键字，可以自己实现ajax请求数据再赋值,用户未输入时，以水印方式显示在输入框，直接不输入内容搜索会搜索默认关键字
				this.defaultKeyword = "输入订单号或商品名称";
			},
			//加载历史搜索
			loadOldKeyword() {
				this.oldKeywordList = JSON.parse(uni.getStorageSync(this.storageKey) || "[]")
			},
			//监听输入
			inputChange(event) {
				//兼容引入组件时传入参数情况
				// var keyword = event.detail ? event.detail.value : event;
				// if (!keyword) {
				// 	this.keywordList = [];
				// 	this.isShowKeywordList = false;
				// 	return;
				// }
				// this.isShowKeywordList = true;
				//以下示例截取淘宝的关键字，请替换成你的接口
				// uni.request({
				// 	url: 'https://suggest.taobao.com/sug?code=utf-8&q=' + keyword, //仅为示例
				// 	success: (res) => {
				// 		this.keywordList = [];
				// 		this.keywordList = this.drawCorrelativeKeyword(res.data.result, keyword);

				// 	}
				// });
			},
			back() {
				uni.navigateBack()
			},
			//高亮关键字
			drawCorrelativeKeyword(keywords, keyword) {
				var len = keywords.length,
					keywordArr = [];
				for (var i = 0; i < len; i++) {
					var row = keywords[i];
					//定义高亮#9f9f9f
					var html = row[0].replace(keyword, "<span style='color: #9f9f9f;'>" + keyword + "</span>");
					html = '<div>' + html + '</div>';
					var tmpObj = {
						keyword: row[0],
						htmlStr: html
					};
					keywordArr.push(tmpObj)
				}
				return keywordArr;
			},
			// 点击楼层商品跳转到详情页
			navToFloorItemDetail(good) {
				if(good.status != 'onsale') return
				const id = good.goodsId||good.id;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},

		}
	}
</script>
<style lang="scss">
	view {
		display: block;
	}

	.search-box {
		width: 100%;
		// background-color: rgb(242, 242, 242);
		padding: 15upx 2.5%;
		display: flex;
		justify-content: space-between;
		position: sticky;
		border-bottom: 1rpx solid #e2e2e2;
		top: 0;
	}

	.search-box .mSearch-input-box {
		width: 100%;
	}
	.like_name {
		text-align:center;
		font-size: 34rpx;
	}

	.search-box .input-box {
		width: 85%;
		margin-left: 10rpx;
		flex-shrink: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-box .search-btn {
		width: 15%;
		margin: 0 0 0 2%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		font-size: 26upx;
		color: #000;
		border-radius: 60upx;
	}

	.search-box .input-box>input {
		width: 100%;
		height: 60upx;
		font-size: 26upx;
		border: 0;
		border-radius: 60upx;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		padding: 0 30rpx;
		margin: 0;
		background-color: rgb(242, 242, 242);
	}

	.placeholder-class {
		color: #9e9e9e;
	}

	.search-keyword {
		width: 100%;
		background-color: rgb(242, 242, 242);
	}

	.keyword-list-box {
		height: calc(100vh - 110upx);
		padding-top: 10upx;
		border-radius: 20upx 20upx 0 0;
		background-color: #fff;
	}

	.keyword-entry-tap {
		background-color: #eee;
	}

	.keyword-entry {
		width: 94%;
		height: 80upx;
		margin: 0 3%;
		font-size: 30upx;
		color: #333;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: solid 1upx #e7e7e7;
	}

	.keyword-entry image {
		width: 60upx;
		height: 60upx;
	}

	.keyword-entry .keyword-text,
	.keyword-entry .keyword-img {
		height: 80upx;
		display: flex;
		align-items: center;
	}

	.keyword-entry .keyword-text {
		width: 90%;
	}

	.keyword-entry .keyword-img {
		width: 10%;
		justify-content: center;
	}

	.keyword-box {
		background-color: white;
		height: calc(100vh - 110upx);

		.keyword-block {
			padding: 10upx 0;

			.keyword-wrapper {
				display: flex;
				margin: 0 3%;
				align-items: flex-start;

				.keyword {
					flex: 1;
					width: 0;
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;

					&.no-wrap {
						white-space: nowrap;
						flex-wrap: nowrap;
						overflow: hidden;
					}

					view {
						border-radius: 40upx;
						padding: 0 30upx;
						margin: 10upx 20upx 10upx 0;
						height: 52upx;
						line-height: 52upx;
						font-size: 24upx;
						background-color: rgb(242, 242, 242);
						color: #aaaaaa;

						&.active {
							color: #d9001b;
							background-color: rgba(#d9001b, 0.1);
						}
					}
				}

				.icon {
					border-radius: 40upx;
					padding: 0 30upx;
					margin: 10upx 0 0 20upx;
					height: 52upx;
					line-height: 52upx;
					font-size: 24upx;
					background-color: rgb(242, 242, 242);
					color: #aaaaaa;

					&.up {
						/deep/.u-icon {
							rotate: 180deg;
							transition: rotate .3s;
						}
					}

					&.down {
						/deep/.u-icon {
							rotate: 0deg;
							transition: rotate .3s;
						}
					}
				}
			}

			.keyword-list-header {
				width: 100%;
				padding: 10upx 3%;
				font-size: 27upx;
				color: #333;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.hide-hot-tis {
				display: flex;
				justify-content: center;
				font-size: 28upx;
				color: #6b6b6b;
			}

			.hot-keyword {
				border-radius: 20rpx;
				border: 2rpx solid rgb(242, 242, 242);
				margin: 0 3%;
				padding: 10rpx 0;

				view {
					color: #aaa;
					padding: 8rpx 20rpx;
					font-size: 24rpx;

					&.active {
						color: #d9001b;
					}
				}
			}
		}
	}

	.history {
		font-size: 26rpx;
		border-radius: 20rpx;
		padding: 10rpx 20rpx;

		&_header {
			color: #333;
		}

		&_wrapper {
			display: flex;
			    /* align-items: flex-start; */
			    flex-wrap: wrap;
		}

		&_item {
			margin-top: 10rpx;
			width: 230upx;
			&:last-child {
				margin-right: 0;
			}

			&_img {
				width: 190rpx;
				height: 190rpx;
				position: relative;
				margin-left: 26upx;
				border-radius: 10rpx;

				image {
					width: 100%;
					border: 2rpx solid #e2e2e2;
					border-radius: 10rpx;
				}
				
				.tag{
					position: absolute;
					width: 150rpx;
					height: 150rpx;
					left: 20rpx;
					top: 20rpx;
				}

				&_tag {
					position: absolute;
					right: 4rpx;
					top: 4rpx;
					font-size: 20rpx;
					background: white;
					border: 2rpx solid #333;
					border-radius: 20rpx;
					transform: scale(0.7);
					transform-origin: right top;
					padding: 4rpx 10rpx;
				}
			}
				&_content {
					margin-left: 26upx;
					margin-right: 26upx;
					&_add{
						width: 60rpx;
					}
					&_name {
						overflow: hidden;
						    white-space: nowrap;
						    text-overflow: ellipsis;
					}
				}
		}
	}
	.recommendArea {
		// margin-left: 30rpx;
		// margin-right: 30rpx;
		position: relative;
	
		.guessLike {
			display: flex;
			justify-content: center;
			height: 42rpx;
			margin: 30rpx 0;
	
			.photo1 {
				margin: 12rpx 30rpx 0rpx 30rpx;
				width: 12px;
				height: 12px;
				background: linear-gradient(225deg, #FFE58F 0%, #F7B500 100%);
				border-radius: 2px 6px 2px 6px;
			}
	
			.photo2 {
				margin: 8rpx 0 0 0;
				width: 16px;
				height: 16px;
				background: linear-gradient(45deg, #69C0FF 0%, #4080FF 100%);
				border-radius: 2px 8px 2px 8px;
			}
	
			.photo3 {
				margin: 8rpx 0 0 0;
				width: 16px;
				height: 16px;
				background: linear-gradient(45deg, #D3ADF7 0%, #2E54EB 100%);
				border-radius: 8px 2px 8px 2px;
			}
	
			.photo4 {
				margin: 12rpx 30rpx 0rpx 30rpx;
				width: 12px;
				height: 12px;
				background: linear-gradient(225deg, #FFD273 0%, #F66445 100%);
				border-radius: 6px 2px 6px 2px;
			}
	
			.guessLikeWord {
				margin: 0rpx 40rpx;
				font-size: 40rpx;
				line-height: 40rpx;
				color: #323232;
				font-weight: 500;
				height: 40rpx;
				font-family: PingFangSC-Medium, PingFang SC;
			}
		}
	
		.goodList {
			display: flex;
			justify-content: space-between;
			flex-flow: row wrap;
	
			.floor-item {
				width: 48%;
				background-color: #fff;
				border-radius: 10rpx;
				padding: 16rpx;
				font-size: 15px;
				color: $font-color-dark;
				// line-height: 1.8;
				text-align: center;
				margin-bottom: 20rpx;
				position: relative;
	
				// padding-bottom: 30rpx;
				.item-title {
					height: 40px;
					text-align: left;
					color: $font-color-dark;
					font-size: 15px;
					margin-top: 12rpx;
					margin-bottom: 2rpx;
					// overflow: hidden;
					// text-overflow: ellipsis;
				}
	
				image {
					width: 100%;
					height: 150px;
					border-radius: 6upx;
				}
	
				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
	
					.left {
						display: flex;
						flex-direction: column;
	
						.integral {
							color: #F6283D;
							font-size: 15px;
							// margin: 4rpx 4rpx 0 4rpx;
	
							&:before {
								background: url(../../static/money.png) no-repeat;
								width: 24rpx;
								height: 24rpx;
								margin-right: 4rpx;
								display: inline-block;
								content: '';
								background-size: contain;
							}
	
							&:after {
								margin-left: 4rpx;
								content: '积分';
								color: #909090;
								font-size: 13px;
							}
						}
	
						.price {
							padding-left: 28rpx;
							text-align: left;
							display: block;
							font-size: 13px;
							color: #646464;
						}
					}
	
					.right {
						display: flex;
						align-items: center;
	
						image {
							width: 65rpx;
							height: 60rpx;
						}
					}
				}
			}
		}
	}
</style>
